<template>
  <div>
<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="!ids.length"-->
<!--          @click="handleDelete"-->
<!--        >删除</el-button>-->
<!--        <span class="ml10">共{{ total }}条</span>-->
<!--&lt;!&ndash;        <span class="ml10">10条末读</span>&ndash;&gt;-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-table ref="tables" v-loading="loading" :data="list" v-table-height="{bottomOffset: 85, callback: height => tableHeight = height}" :height="tableHeight">
      <el-table-column label="序号" width="80" prop="index" align="center"></el-table-column>
      <el-table-column label="类型" width="100" align="center" prop="msgType">
        <template slot-scope="{ row }">
          {{ selectDictLabel(message_type, row.msgType) }}
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="状态" width="100" align="center" prop="mark">
        <template slot-scope="{ row }">
          <el-tag v-if="row.mark === 0" type="info">未读</el-tag>
          <el-tag v-else type="danger">已读</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发送时间" width="200" align="center" prop="createTime" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="发送人" align="center" prop="createBy" width="130" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="onDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <Detail ref="detail" :message_type="message_type" @close="getList" />
  </div>
</template>

<script>
import { getMessageList } from '@/api/message'
import Detail from '@/views/message/components/details.vue'

export default {
  name: "System",
  components: { Detail },
  props: {
    message_type: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        msgType: [1, 2]
      },
      tableHeight: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志 */
    getList() {
      this.loading = true;
      getMessageList(this.queryParams).then(res => {
        res.rows.forEach((item, index) => {
          item.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + (index + 1)
        })
        this.loading = false
        this.list = res.rows;
        this.total = res.total;
      }).catch(err => {
        this.loading = false
      })
    },

    // 查看详情
    onDetail(row) {
      this.$refs.detail.open(row.id)
    }
  }
};
</script>

